<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('overflow1').style.overflow = "visible";
  document.getElementById('overflow2').style.overflow = "hidden";
}
onload = runRepaintAndPixelTest;
</script>
<style>
body {
  margin: 0;
}
#overflow1 {
  overflow: hidden;
  width: 200px;
  height: 200px;
}
#overflow2 {
  overflow: visible;
  width: 200px;
  height: 200px;
}
.composited-child {
  width: 100px;
  height: 100px;
  background-color: green;
  will-change: transform;
}
.overflow-child {
  position: relative;
  top: 50px;
  left: 150px;
}
</style>
<!-- We should not repaint composited descendants on overflow style changes (verified with the text expectation). 
The compositor should handle any visual change caused by the change of overflow clipping (verified with the pixel expectation). -->  
<div id="overflow1">
  <div class="composited-child"></div>
  <div class="composited-child overflow-child"></div>
</div>
<div id="overflow2">
  <div class="composited-child"></div>
  <div class="composited-child overflow-child"></div>
</div>
